// 实现标签页切换

function initSwitchTab() {
    //1.获取相关元素
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // 得到一个数组[0]就是会话列表 [1]为好友列表
    let lists = document.querySelectorAll('.list');


    //2.注册点击事件
    tabSession.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = 'url(image/对话.png)';
        tabFriend.style.backgroundImage = 'url(image/用户2.png)';
        //点击session按钮，显示会话列表
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = 'url(image/对话2.png)';
        tabFriend.style.backgroundImage = 'url(image/用户.png)';

        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();


//操作websocket
//编写js使用websocket的代码
//创建一个websocket实例
// let websocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
let websocket = new WebSocket("ws://" + location.host +"/WebSocketMessage");

//给websocket注册回调函数
websocket.onopen = function () {
    //连接建立完成后，自动执行
    console.log("websocket 连接成功");
}

websocket.onclose = function () {
    //连接断开后，自动执行
    console.log("websocket 连接断开");
}

websocket.onerror = function () {
    //连接异常时，自动执行
    console.log("websocket 连接异常");
}

websocket.onmessage = function (e) {
    //收到消息时，自动执行
    console.log("websocket 收到消息" + e.data);
    //收到的额e.data是json字符串，需要转化为js对象
    let resp = JSON.parse(e.data);
    if(resp.type == 'message'){
        //处理响应
        handleMessage(resp);
    }else{
        console.log("resp.type 不合法");
    }
}

function handleMessage(resp){
    //将客户端收到的消息展示出来
    //展示到左侧会话上，以及右侧主消息区（前提是选中）

    //1.根据sessionId获取到对应会话的li（有可能当前会话不存在，需要创建）
    let curSessionLi = findSessionLi(resp.sessionId);
    if(curSessionLi == null){
        //创建一个新的会话
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message_session_id',resp.sessionId);
        //p标签内为消息预览内容
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
        + '<p></p>';
        //给li标签加入点击事件
        curSessionLi.onclick = function(){
            clickSession(curSessionLi);
        }
    }
    //2.将新消息显示到会话预览区域（li的p标签中）如果太长，需要截断
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if(p.innerHTML.length > 10){
        p.innerHTML = p.innerHTML.substring(0,10) + '...';
    }
    //3.收到消息的会话需要置顶
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);
    //4.如果收到消息的会话是被选中的状态，则把当前消息放到右侧消息框中
    if(curSessionLi.className == 'selected'){
        let messageShowDiv = document.querySelector('.right .message-show');
        //向消息列表添加新消息
        addMessage(messageShowDiv,resp);
        //5.调整滚动条的位置
        scrollBottom(messageShowDiv);
    }
    
    
}

function findSessionLi(targetSessionId){
    //获取到所有会话列表的li
    let sessionLis = document.querySelectorAll('#session-list li');
    for(let li of sessionLis){
        let sessionId = li.getAttribute('message_session_id');
        if(sessionId == targetSessionId){
            return li;
        }
    }
    return null;
}
/////////////////////////////////////////////////////////////////
//实现消息发送/接收逻辑
/////////////////////////////////////////////////////////////////
function initSendButton() {
    //1.获取到发送按钮 和 消息输入框
    let sendButton = document.querySelector(".right .ctrl button");
    let messageInput = document.querySelector('.right .message-input');
    //给按钮注册点击事件
    sendButton.onclick = function() {
        // a) 对输入框内容判定，看是否为空
        if(!messageInput.value){
            //为null 或 ''
            return;
        }
        // b) 获取当前li标签的sessionId
        let selectedLi = document.querySelector('#session-list .selected');
        if(selectedLi==null){
            //未选中li
            return;
        }
        let sessionId = selectedLi.getAttribute("message_session_id");
        // c) 构造json数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        req = JSON.stringify(req);//!!!要先转化为string才能send
        console.log("[websocket] send" + req);
        // d) 通过websocket发送消息
        websocket.send(req); 
        // e) 消息发送完成后，清空输入框
        messageInput.value = '';
    }
}
initSendButton();








//从服务器获取用户登录数据
function getUserInfo() {
    $.ajax({
        type: "get",
        url: "/user/userInfo",
        success: function (body) {
            //从服务器获取数据
            //检验结果是否有效
            //如果无效，则跳转到登录页面
            //如果有效，把用户名显示左上角
            //同时也可以记录userId到html标签的属性中备用
            if (body.userId && body.userId > 0) {
                //结果有效
                let userDiv = document.querySelector(".main .left .user");
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("user_id", body.userId);
            } else {
                //结果无效,说明没有登录
                alert("用户未登录！");
                location.href = "login.html";
            }
        }
    });
}

getUserInfo();


//获取还好友列表
function getFriendList() {
    $.ajax({
        type: "get",
        url: "/friend/getFriendList",
        success: function (body) {
            //1.清空之前的好友列表
            let friendListUL = document.querySelector("#friend-list");
            friendListUL.innerHTML = '';
            //2.遍历body，将结果重新放到好友列表中
            for (let friend of body) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                //顺便记录friendId
                li.setAttribute("friend_id", friend.friendId);
                friendListUL.appendChild(li);


                //创建会话，每个li标签，对应界面上一个好友选项，给这个li加上点击事件的处理
                li.onclick = function () {
                    //参数表示区分了当前用户点击的是哪个好友
                    clickFriend(friend);
                }
            }
        },
        error: function () {
            alert("获取好友列表失败!");
        }
    });
}

getFriendList();
  


function getSessionList() {
    $.ajax({
        type: "get",
        url: "session/getSessionList",
        success: function (body) {
            //1.清空之前的会话列表
            let sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = '';
            for (let session of body) {
                //对lastMessage的长度进行处理，如果太长就截断
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                //将会话id保存到 li 标签的自定义属性中
                li.setAttribute('message_session_id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'
                    + '<p>' + session.lastMessage + '</p>';//先看作是私聊
                sessionListUL.appendChild(li);


                //给li新增点事件，使之点击后有颜色变化
                li.onclick = function () {
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    //1.设置高亮
    let allLis = document.querySelectorAll('#session-list>li');
    activeSession(allLis, currentLi);
    //2.获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message_session_id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    //循环的目的主要是取消未被选中的li标签的className
    for (let li of allLis) {
        if (li == currentLi) {
            //如果当前标签是正在点击的那一个，就设置为selected
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId=" + sessionId);
    //1.清空右侧列表已有内容
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.message-show');
    messageShowDiv.innerHTML = '';

    //2.重新设置会话标题
    //找到当前选中的会话（带有selected的）
    let selectedH3 = document.querySelector('#session-list .selected>h3');
    if (selectedH3) {
        //selectedH3可能不存在，有可能没有选择任何会话
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    //3.发送ajax获取历史消息
    $.ajax({
        type: 'get',
        url: '/message/getMessageRecordBySessionId?sessionId=' + sessionId,
        success: function (body) {
            for (let message of body) {
                addMessage(messageShowDiv, message);
            }

            //添加操作，在构造好消息之后，控制滚动条，自动滚动到最下方
            scrollBottom(messageShowDiv);
        }
    });
}


function addMessage(messageShowDiv, message) {
    let messageDiv = document.createElement('div');
    //根据当前消息是不是用户自己发的来确定消息靠左还是靠右
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if (selfUsername == message.fromName) {
        //说明消息是自己发的，靠右
        messageDiv.className = 'message message-right';
    } else {
        //说明消息是别人发的，靠左
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">'
        + '<h4>' + message.fromName + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

//将messageShowDiv里面的内容滚动到底部
function scrollBottom(elem) {
    //1.获取到可视区域高度
    let clientHeight = elem.offsetHeight;
    //2.获取到内容高度
    let scrollHeight = elem.scrollHeight;
    //3.进行滚动操作
    elem.scrollTo(0, scrollHeight - clientHeight);
}

//点击好友列表中的好友时，触发
function clickFriend(friend) {
    //1.判断与当前点击的好友有没有会话
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#session-list');
    if (sessionLi) {
        //2.如果有，将这个会话设置为选中状态并置顶,并获取历史消息
        //insertBefore 把这个找到的li标签放到最前面去
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        //选中效果和获取历史消息，在clickSession中已经实现，直接调用即可
        sessionLi.click();
    } else {
        //3.如果没有，创建新会话（创建li标签，并通知服务器）
        sessionLi = document.createElement('li');
        //构造li标签，新会话没有内容，设为空即可
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        //置顶
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        }
        sessionLi.click();

        //通知服务器
        createSession(friend.friendId, sessionLi);
    }
    //4.将标签页切换到会话列表
    //使用模拟点击操作
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}



//如果找到了相应的标签，返回相应的li，没找到，返回null
function findSessionByName(username) {
    //获取会列表所有li
    //遍历查找符合条件的li
    let sessionLis = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        //获取li中的h3中的值并判断是否的等于username
        let h3 = sessionLi.querySelector('h3');
        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}


function createSession(friendId, sessionLi) {
    $.ajax({
        type: "post",
        url: "/session/getSessionByClickFriend?toUserId=" + friendId,
        success: function (body) {
            if (body < 0) {
                return;
            }
            console.log("会话创建成功");
            sessionLi.setAttribute("message_session_id", body.sessionId);
        },
        error: function () {
            console.log("会话创建失败");
        }
    });
}